<template>
  <div>
    <el-dialog
      title="选择物料"
      :visible.sync="dialogTableVisible"
      :close-on-click-modal="false"
      width="1200px">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="物料名称" >
          <el-input
            v-model="queryParams.mName"
            placeholder="请输入物料名称"
            clearable
            size="mini"
          />
        </el-form-item>
        <el-form-item label="物料编码" >
          <el-input
            v-model="queryParams.mNo"
            placeholder="请输入物料编码"
            clearable
            size="mini"
          />
        </el-form-item>
        <el-form-item label="物料规格" >
          <el-input
            v-model="queryParams.mModel"
            placeholder="请输入物料规格"
            clearable
            size="mini"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="search">查询</el-button>
          <el-button type="primary"  size="mini" @click="determine">确定</el-button>
        </el-form-item>
      </el-form>
      <el-table  v-loading="loading" :data="chanpinList" stripe
                 @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="80"></el-table-column>
        <el-table-column align="center" type="index" label="序号"  width="55"  />
        <el-table-column align="center" label="科室" property="depOffName"   ></el-table-column>
        <el-table-column align="center" label="物料编码" property="mno" :show-overflow-tooltip="true" width='150' ></el-table-column>
        <el-table-column align="center" label="物料名称"  property="mname"  ></el-table-column>
        <el-table-column align="center" label="物料规格"  property="mmodel"  ></el-table-column>
        <el-table-column align="center" label="分类名称"  property="typeName" :show-overflow-tooltip="true" width='180'></el-table-column>
        <el-table-column align="center" label="单位"  property="unit"  ></el-table-column>
        <el-table-column align="center" label="计划价"  property="planPrice"  ></el-table-column>
        <el-table-column align="center" label="技术参数"  property="technicalParameters" :show-overflow-tooltip="true" v-if="false"></el-table-column>
        <el-table-column align="center" label="物料状态"  property="mtype" :show-overflow-tooltip="true" width="150" v-if="false">
          <template slot-scope="scope" style="text-align: center">
            <div style="padding-left: 5px;padding-right: 5px; background:#78BF34  ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='1'" >招标采购</div>
            <div style="padding-left: 5px;padding-right: 5px; background:#9E71DC ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='2'">产业协同</div>
            <div style="padding-left: 5px;padding-right: 5px;background:#DEA11E  ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='3'">战略采购</div>
            <div style="padding-left: 5px;padding-right: 5px;background:#9E71DC  ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='4'">询比价</div>
            <div style="padding-left: 5px;padding-right: 5px;background:#9E71DC  ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='5'">长协</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="采购方式"  property="purchasingMethod" :show-overflow-tooltip="true" width="100" v-if="false">
          <template slot-scope="scope" style="text-align: center">
            <div style="background:#78BF34  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.purchasingMethod=='1'" >正常</div>
            <div style="background:#9E71DC  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.purchasingMethod=='2'">慎用</div>
            <div style="background:#DEA11E  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.purchasingMethod=='3'">关闭</div>
            <div style="background:#9E71DC  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.purchasingMethod=='4'">新增</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="库存"  property="inventory"  > </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="search"
      />

<!--      <span slot="footer" class="dialog-footer">-->
<!--        <el-button type="primary"  size="mini" @click="determine">确定</el-button>-->
<!--      </span>-->
    </el-dialog>
  </div>
</template>

<script>
  import request from '@/utils/request'
  export default {
    props: ['addProductData'],
    name: "Role",
    data() {
      return {
        total:0,
        queryParamsb: {},
        name:'新增需求计划',
        //物料科室数据
        wlksList:[
          {value:'1',label:'科室1'},
          {value:'2',label:'科室2'},
        ],
        //资金来源
        zjlyList:[
          {value:'1',label:'来源1'},
          {value:'2',label:'来源2'},
        ],


        loading:false,
        dialogTableVisible:true,
        //产品查询数据
        queryParams:{
          pageNum: 1,
          pageSize: 10,
          mNo: '',
          mName: '',
          waId:'',
          mModel:'',
        },
        //类型数据
        optionsLX:[
          {value:'1',label:'根据计划'},
          {value:'2',label:'根据库存'},
        ],
        newxuanz:[],//当前选中的
        deptOptions:[],//树形图数据
        defaultProps: {
          children: "children",
          label: "label"
        },
        //产品列表数据
        chanpinList:[],
        //选中
        addList:[]

      };
    },
    components:{

    },
    watch: {
      dialogTableVisible: function () {
        this.dialogTableVisible = true;//始终让他为true;
        this.cancel();//隐藏
      },
    },
    created() {
      console.log('接受',this.addProductData)
      this.queryParams.waId=this.addProductData.id
      this.search()
    },
    methods: {
      //查询
      search:function(){
        this.loading = true
        request({
          url: '/material/supplies/listInventory',
          method: 'get',
          params:this.queryParams
        }).then(response => {
          this.loading = false
          this.chanpinList = response.rows
          console.log(this.chanpinList)
          this.total = response.total

        });
      },
      //表格复选框监听
      handleSelectionChange:function(row){
        // console.log(123,row)
        this.addList = row
      },
      handleDelete:function(row){
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.shanchu(row)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      shanchu:function(row){
        console.log(row)
        this.addList.splice(row,1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      },
      //物料添加
      wlAdd:function(row){
        console.log('物料添加',row)
        debugger
        if(this.addList.length!=0){
          //判断不可用重复添加
          for(var i=0;i<this.addList.length;i++){
            if(this.addList[i].id==row.id){
              this.$message({
                type: 'info',
                message: '已经存在'
              });
              return
            }
          }
          this.addList.push(row)
        }else {
          this.addList.push(row)
        }
      },
      //确定
      determine:function(){
        this.$emit('addProductBack',this.addList)//将submitModel的值传给父组件
      },
      //隐藏
      cancel:function(){
        this.determine()

      },
      //产品表格监听
      chanpinonChange(val) {
        console.log(val)
        this.newxuanz = val
      },
      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },

    }
  };
</script>
<style >





</style>
